import React from 'react';
import IconDeletedAll from '@/components/Icons/IconDeletedAll';
import HistoryItem from './historyItem';
import classNames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
import { clearAllHistoryChatAction } from '@/store/actions/chat';
import { chatContextType } from '@/types/chat';
// import { v4 as uuidv4 } from 'uuid';
import { useRouter } from 'next/router';

type historyType = {
  className?: string;
};

const HistoryChatItems: React.FC<historyType> = ({ className }) => {
  const dispatch = useDispatch();
  const router = useRouter();

  const historyChats = useSelector((state: any) => state.chat.chatContexts);

  const createNewChat = () => {
    router.push({
      pathname: '/chat',
    });
  };

  const clearAllHistory = () => {
    dispatch(clearAllHistoryChatAction());
  };

  return (
    <div className={classNames('px-4 py-3 border-t', className)}>
      {/* title */}
      <div className="font-sans text-sm font-semibold mb-4">历史记录</div>

      {/* create new chat */}
      <div className="flex items-center justify-between mb-4 mt-1">
        <div
          className=" border hover:border-sky-500 hover:bg-sky-100 rounded-full h-8 w-29 px-7 py-1 align-middle text-sky-400 cursor-pointer"
          onClick={createNewChat}
        >
          新建对话
        </div>
        <div
          title="删除全部"
          className="border rounded-full hover:border-red-300 hover:bg-red-100 hover:fill-red-700 cursor-pointer"
          onClick={clearAllHistory}
        >
          <IconDeletedAll clasName=" h-5 w-5 mx-1 my-1 px-1 hover:bg-red-100 " />
        </div>
      </div>
      {/* history chat record */}
      <div className="h-full overflow-y-auto scrollbar-hide">
        {historyChats.map((value: chatContextType, index: any) => {
          return (
            <HistoryItem
              key={index}
              id={value.chatid}
              title={value.title}
              activate={value.chatid === router.query.id}
            />
          );
        })}
      </div>
    </div>
  );
};

export default HistoryChatItems;
